<template>
  <div class="role-index-container container margin-10">
    <div class="lin-flex full-height full-width">
      <el-scrollbar class="role-container full-height">
        <el-tree
          :data="roleTree"
          :props="defaultRoleTreeProps"
          :expand-on-click-node="false"
          default-expand-all
          highlight-current
          class="role-tree margin-bottom-10"
          @node-click="onClickRole"
        >
          <span slot-scope="{ node, data }" class="role-tree-node">
            <span>{{ node.label }}</span>
            <el-dropdown @command="(command)=>onCommandRole(command, data)">
              <span class="el-dropdown-link">
                <i class="el-icon-more el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit">{{ $t('role.edit') }}</el-dropdown-item>
                <el-dropdown-item command="delete" style="color: #F56C6C">{{ $t('role.delete') }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </el-tree>
        <div class="lin-flex lin-flex-between margin-top-10">
          <el-button plain size="small" icon="el-icon-plus" @click="onAddRole">{{ $t('role.addRole') }}</el-button>
        </div>
      </el-scrollbar>

      <div class="user-container full-height">
        <div class="query-container lin-flex lin-flex-between">
          <div class="left-panel lin-flex">
            <el-input v-model="userListQuery.Query" placeholder="" size="mini" />
            <el-button
              type="primary"
              icon="el-icon-search"
              style="margin-left: 10px"
              @click="onSearchUser"
            >
              {{ $t('user.search') }}
            </el-button>
          </div>
          <div class="right-panel">
            <el-button type="primary" icon="el-icon-plus" @click="onAddUser">
              {{ $t('user.addUser') }}
            </el-button>
            <el-button type="danger" icon="el-icon-delete" plain @click="onBatchDeleteTerminate">
              {{ $t('user.batchTerminate') }}
            </el-button>
          </div>
        </div>

        <div class="margin-top-10">
          <el-table
            :data="userList"
            border
            fit
            highlight-current-row
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column
              label="ID"
              sortable
              prop="Id"
              width="55"
            >
              <template slot-scope="scope">
                {{ scope.row.Id }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('user.name')"
              sortable
              prop="Username"
              width="80"
            >
              <template slot-scope="scope">
                {{ scope.row.Name }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('user.username')"
              sortable
              prop="Username"
              width="95"
            >
              <template slot-scope="scope">
                {{ scope.row.Username }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('user.email')"
              sortable
              prop="Email"
              width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.Email }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('user.dept')"
              prop="Dept"
              min-width="100"
            >
              <template slot-scope="scope">
                <el-tag v-for="dept in scope.row.DeptIdList" :key="dept">{{ dept }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <role-detail v-model="roleDialog" />
  </div>
</template>

<script>
import { fetchRoleList } from '@/api/role'
import RoleDetail from '@/views/role/components/RoleDetail'
import { deepClone } from '@/utils'
import { fetchUserList } from '@/api/user'

const defaultRoleForm = {
  Title: '',
  Desc: ''
}

export default {
  name: 'RoleIndex',
  components: { RoleDetail },
  data() {
    return {
      roleList: [],
      roleTree: [],
      roleTotal: 0,
      roleDialog: {
        show: false,
        title: '',
        form: deepClone(defaultRoleForm)
      },
      userList: [],
      userTotal: 0,
      userListQuery: {
        Page: 1,
        PageSize: 10,
        RoleId: '',
        Query: ''
      },
      defaultRoleTreeProps: {
        children: 'children',
        label: 'Title'
      }
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const data = await fetchRoleList()
      this.roleList = data.Data
      this.roleTree = data.Data
    },
    async fetchUserList() {
      const data = await fetchUserList(this.userListQuery)
      this.userList = data.Data
      this.userTotal = data.Count
    },
    onAddRole() {
      this.$set(this.roleDialog, 'form', deepClone(defaultRoleForm))
      this.$set(this.roleDialog, 'title', this.$t('role.addRole'))
      this.$set(this.roleDialog, 'status', 'add')
      this.$set(this.roleDialog, 'show', true)
    },
    onClickRole(node) {
      if (node.Id) {
        this.$set(this.userListQuery, 'RoleId', node.Id)
      } else {
        this.$set(this.userListQuery, 'RoleId', null)
      }
      this.$set(this.userListQuery, 'Page', 1)
      this.fetchUserList()
    },
    onCommandRole(command, data) {
      if (command === 'edit') {
        this.onEditRole(data)
      }
    },
    onEditRole(data) {
      this.$set(this.roleDialog, 'form', deepClone(data))
      this.$set(this.roleDialog, 'title', this.$t('role.editRole'))
      this.$set(this.roleDialog, 'status', 'edit')
      this.$set(this.roleDialog, 'show', true)
    },
    onSearchUser() {
      this.$set(this.userListQuery, 'Page', 1)
      this.fetchUserList()
    },
    onAddUser() {

    },
    onBatchDeleteTerminate() {
    }
  }
}
</script>

<style lang="scss">
.role-container {
  width: 250px;
  padding-right: 20px;
  border-right: 1px solid #f3f3f3;
  height: 100%;

  .el-tree-node__content {
    height: 34px !important;
  }

  .role-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding: 5px;
    margin-top: 5px;
  }
}

.user-container {
  padding: 0 10px;
  flex: 1 1 auto;
}
</style>
